<template>
  <div >
    <div class="container">
      <header>
        <i class="el-icon-cloudy"></i>
        <span>商城统计</span>
      </header>
      <div class="shopStatistic">
        <el-card class="div1" style="background:#F7D1DE">
          <div>用户总量</div>
          <div>33097</div>
          <div>昨天</div>
          <div>今天</div>
        </el-card>
        <el-card class="div1" style="background:#A5F3FF">
          <div>订单总量</div>
          <div>33097</div>
          <div>昨天</div>
          <div>今天</div>
        </el-card>
        <el-card class="div1" style="background:#F27988">
          <div>成交总量</div>
          <div>33097</div>
          <div>昨天</div>
          <div>今天</div>
        </el-card>
        <el-card class="div1" style="background:#F8E181">
          <div>收入总计</div>
          <div>33097</div>
          <div>昨天</div>
          <div>今天</div>
        </el-card>
      </div>
    </div>
    <div class="container">
      <header>
        <i class="el-icon-cloudy"></i>
        <span>近30日热销商品</span>
      </header>
      <div ref="productChart" style="width:100%;height:500px"></div>
    </div>
    <div class="container">
      <header>
        <i class="el-icon-cloudy"></i>
        <span>近30日成交金额走势</span>
      </header>
      <div ref="chart" style="width:100%;height:400px"></div>
    </div>
    <!-- <div class="container">
      <header>
        <i class="el-icon-cloudy"></i>
        <span>近30日订单交易走势</span>
      </header>
    </div> -->
    
  </div>
</template>

<script>
export default {
  mounted() {
    this.getEchartData();
  },

  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
      const myChart = this.$echarts.init(chart);
      if (chart) {
        const option = {
           title: {
        text: '近30日成交金额趋势折线图',
        left: 'center',
        align: 'right'
    },
           color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            name:"日期",
            type:"category",
            data: ["2020/9/10","2020/9/11","2020/9/12","2020/9/13","2020/9/14","2020/9/15","2020/9/16","2020/9/17","2020/9/18","2020/9/19","2020/9/20","2020/9/21","2020/9/21","2020/9/22","2020/9/23","2020/9/24","2020/9/25","2020/9/26","2020/9/27","2020/9/28","2020/9/29","2020/9/30","2020/10/1","2020/10/2","2020/10/3","2020/10/4","2020/10/5","2020/10/6","2020/10/7","2020/10/8","2020/10/9","2020/10/10"],
          },
          yAxis: {type:"value",
           name:"金额/元",},
          series: [
            {
              name: "成交金额",
              type: "line",
              data: [1500, 2000, 3600, 10000, 1500, 20000,3000,6000,20000,5000,8000,10000,5000,9000,4000,1500, 2000, 3600, 10000, 1500, 20000,3000,6000,20000,5000,8000,10000,5000,9000,4000,13000,10000],
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
      //商品统计
      const pChart=this.$refs.productChart
      const productChart = this.$echarts.init(pChart);
      if (pChart) {
        const pOption = {
            // backgroundColor: '#2c343c',

    title: {
        text: '近30日商品销量占比图',
        left: 'center',
        top: 20,
        // textStyle: {
        //     color: '#ccc'
        // }
    },

    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        {
            name: '商品销量',
            type: 'pie',
            radius: '70%',
            center: ['50%', '55%'],
            data: [
                {value: 335, name: 'YSL小金条615'},
                {value: 310, name: 'MAC小辣椒色'},
                {value: 274, name: 'YSL小银条428'},
                {value: 235, name: '其他'},
                {value: 400, name: 'Dior小黑管233'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                color: 'rgba(50, 50, 50)'
            },
            labelLine: {
                lineStyle: {
                    color: 'rgba(50, 50, 50,0.5)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 100,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            // animationDelay: function (idx) {
            //     return Math.random() * 200;
            // }
        }
    ]
        };
        productChart.setOption(pOption);
        window.addEventListener("resize", function () {
          productChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          productChart.resize();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.container {
  align-content: left;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
}
.shopStatistic {
  display: flex;
  align-content: space-between;
}
.div1 {
  flex: 1;
  align-items: left;
  padding: 1%;
  margin: 1%;
  color: white;
  border-radius: 15px;
}
</style>
